/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { withRouter, Link } from 'react-router-dom';
import { Input, Button, Checkbox, Grid, Message } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import IceIcon from '@icedesign/foundation-symbol';
import Cookies from 'universal-cookie';
import axios from "../../instances/request";

const cookies = new Cookies();
const { Row, Col } = Grid;

@withRouter
class UserLogin extends Component {
  static displayName = 'UserLogin';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: {
        username: '',
        password: '',
        checkbox: false,
      },
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  /**
   * 发送登录验证，成功则设置Cookie，然后跳转到/dashboard首页
   */
  handleSubmit = (e) => {
    e.preventDefault();
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        console.log('errors', errors);
        return;
      }
      axios.post(`/login`,{
        username: values.username,
        password: values.password,
      }).then((res) => {
        console.log("用户登录接口", res);
        const { code, msg } = res.data;
        switch (code){
          case 0:
            Message.success('登录成功');
            cookies.set("token", msg.token, {  // 12个小时后过期
              expires: new Date(new Date().getTime() + 60 * 60 * 12 * 1000)
            });
            this.props.history.push('/');
            break;
          case 1:
            Message.error("用户名或密码错误");
            return;
        }
      }).catch((err) => {
        console.log(err);
        Message.error(`用户登录接口${err}`);
        return Promise.reject(err);
      });
    });
  };

  render() {
    return (
      <div className="formContainer">
        <h4 className="formTitle">登 录</h4>
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.formChange}
          ref="form"
        >
          <div className="formItems">
            <Row className="formItem">
              <Col className="formItemCol">
                <IceIcon type="person" size="small" className="inputIcon" />
                <IceFormBinder name="username" required message="必填">
                  <Input
                    className="next-input-single"
                    size="large"
                    autoComplete={'new-password'}
                    trim={true}
                    maxLength={20}
                    placeholder="用户名"
                    onPressEnter={this.handleSubmit}
                  />
                </IceFormBinder>
              </Col>
              <Col>
                <IceFormError name="username" />
              </Col>
            </Row>

            <Row className="formItem">
              <Col className="formItemCol">
                <IceIcon type="lock" size="small" className="inputIcon" />
                <IceFormBinder name="password" required message="必填">
                  <Input
                    id='password'
                    autoComplete={'new-password'}
                    className="next-input-single"
                    size="large"
                    trim={true}
                    htmlType="text"
                    onFocus={() => {
                      document.getElementById('password').type = 'password';
                    }}
                    placeholder="密码"
                    onPressEnter={this.handleSubmit}
                  />
                </IceFormBinder>
              </Col>
              <Col>
                <IceFormError name="password" />
              </Col>
            </Row>

            <Row className="formItem">
              <Button
                type="primary"
                onClick={this.handleSubmit}
                className="submitBtn"
              >
                登 录
              </Button>
            </Row>

            {/*<Row className="formItem">*/}
              {/*<Col>*/}
                {/*<table className="hint">*/}
                  {/*<thead>*/}
                  {/*<tr></tr>*/}
                  {/*</thead>*/}
                  {/*<tbody>*/}
                  {/*<tr>*/}
                    {/*<td style={{ textAlign: 'center' }}><span>用户名：superuser</span></td>*/}
                  {/*</tr>*/}
                  {/*<tr>*/}
                    {/*<td style={{ textAlign: 'center' }}><span>密码：airport</span></td>*/}
                  {/*</tr>*/}
                  {/*</tbody>*/}
                {/*</table>*/}
              {/*</Col>*/}
            {/*</Row>*/}

          </div>
        </IceFormBinderWrapper>
      </div>
    );
  }
}

export default UserLogin;
